import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import { connect } from 'react-redux';
import { getSlideShow } from './actionCreators';

class Slide extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: ['1', '2', '3', '4', '5', '6', '7', '8'],
      imgHeight: 176,
    }
  }
  
  componentDidMount() {
    // simulate img loading
    this.props.dispatch(getSlideShow());
    setTimeout(() => {
      this.setState({
        data: this.props.slideShow.map(slide=>(
          slide.url
        ))
      });
    }, 100);
  }
  render() {
    return (
        <Carousel
          autoplay
          infinite
          style={{touchAction:'pan-y',height:'25%'}}
        >
          {this.state.data.map(val => (
            <a
              key={val}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val}
                alt=""
                style={{ width: '100%', verticalAlign: 'top', height:170}}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
    );
  }
}
const mapStateToProps = (state) => ({
  slideShow: state.slideShow
})

export default connect(mapStateToProps)(Slide)